<template>
	<view class="text-26 page">
		<view class="flex">
			<view class="chooseTime">时间选择</view>
			<view>
				<view class="flex-between">
					<view v-for="(item,index) in timeClassify" @click="selectTime(index)"
						:class="index == timeIndex ? 'activeTime' : 'defaultTime'" :key="item.value" class="timeItem">
						{{item.name}}
					</view>
				</view>
				<view v-show="isShowRang" class="flex-start" style="margin-top: 30rpx;">
					<view class="flex-start" @click="selectStartTime">
						<view>
							<view v-if="!startTime">开始时间</view>
							<view v-else>{{startTime}}</view>
						</view>
						<image style="width:38rpx;height:16rpx;margin-left:20rpx;"
							src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/xiala@2x.png" mode="aspectFill">
						</image>
					</view>
					<view style="margin:0 30rpx;">-</view>
					<view class="flex-start" @click="selectEndTime">
						<view>
							<view v-if="!endTime">结束时间</view>
							<view v-else>{{endTime}}</view>
						</view>
						<image style="width:38rpx;height:16rpx;margin-left:20rpx;"
							src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/xiala@2x.png" mode="aspectFill">
						</image>
					</view>

				</view>
			</view>
		</view>
		<view class="flex" style="margin:20rpx 0;">
			<view class="chooseTime">时间粒度</view>
			<view>
				<view class="flex-between">
					<view v-for="(item,index) in timeMins" :key="item.value" @click="selectLi(index)"
						:class="index == liIndex ? 'activeLi' : 'defaultLi'" class="timeItem">{{item.name}}</view>
				</view>
			</view>
		</view>

		<!-- 间隙 -->
		<up-gap height="10" bgColor="#1F1757"></up-gap>

		<!-- 上行带宽 -->
		<view style="padding:30rpx 0;box-sizing: border-box;">
			<view>上行带宽</view>
			<view class="text-22 text-blue" style="margin:15rpx 0;">业务缓存期，请耐心等待</view>
			<upKuan :daiKuanData="daiKuanData"></upKuan>
		</view>

		<!-- 间隙 -->
		<up-gap height="10" bgColor="#1F1757"></up-gap>

		<!-- 上行带宽 -->
		<view style="padding:30rpx 0;box-sizing: border-box;">
			<view style="margin-bottom: 15rpx;">下行带宽</view>
			<!-- <view class="text-22 text-blue" style="margin:10rpx 0;">业务缓存期，请耐心等待</view> -->
			<downKuan :daiKuanData="daiKuanData"></downKuan>
		</view>

		<!-- 间隙 -->
		<!-- <up-gap height="10" bgColor="#1F1757"></up-gap> -->

		<!-- 上行带宽 -->
		<!-- <view style="padding:30rpx 0;box-sizing: border-box;">
			<view>重传影响比</view>
			<view class="text-22 text-blue" style="margin:14rpx 0;">
				网络质量问题会导致重传率上升，重传带宽不纳入结算。重传影响比表示重传率对日结算带宽的影响，比例越高，无效重传带宽越多。重传过高会影响节点收益，降低重传方法可见 重传率优化</view>
			<chuanChart></chuanChart>
		</view> -->

		<!-- 自定义时间  开始时间 -->
		<up-datetime-picker :show="showStartTime" v-model="startTime" mode="date" @confirm="confirmStartTime"
			@cancel="cancelStartTime"></up-datetime-picker>

		<!-- 自定义时间  结束时间 -->
		<up-datetime-picker :show="showEndTime" v-model="endTime" mode="date" @confirm="confirmEndTime"
			@cancel="cancelEndTime"></up-datetime-picker>
	</view>
</template>

<script setup>
	// 引入设备分类组件
	import upKuan from "../../../../components/chart/upKuan.vue"
	import downKuan from "../../../../components/chart/downKuan.vue"
	// import chuanChart from "../../../../components/chart/chuanChart.vue"

	import * as api from "@/utils/api.js"
	// 引入时间格式组件
	import {
		getCurrentStartDate,
		getCurrentEndDate,
		getYesterdayStartDate,
		getYesterdayEndAllDate,
		getWeekStartDate,
		getWeekEndDate,
		getMonthStartDate,
		getMonthEndDate
	} from "@/utils/tool.js"
	import {
		timeFormat
	} from 'uview-plus';
	import {
		ref,
		reactive,
		onMounted,
		inject,
		defineProps
	} from 'vue';

	// 接收设备id
	const props = defineProps({
		nodeId: {
			type: String,
			default: "",
		}
	})

	// 上行带宽、下行带宽的请求参数
	const upDownParams = ref({
		granularity: "5min",
		start: "",
		end: ""
	})

	// 自定义开始时间
	const startTime = ref();

	// 自定义开始时间
	const endTime = ref();

	// 显示开始弹窗
	const showStartTime = ref(false);

	// 显示开始弹窗
	const showEndTime = ref(false);

	// 打开开始弹框
	const selectStartTime = () => {
		showStartTime.value = true
	}

	// 取消开始弹窗
	const cancelStartTime = () => {
		showStartTime.value = false
	}

	// 确认选择开始时间
	const confirmStartTime = () => {
		startTime.value = timeFormat(startTime.value, "yyyymmdd");
		upDownParams.value.start = startTime.value + '0000';

		showStartTime.value = false;

		// 按时间筛选
		getDaiKuanData();
	}

	// 确认选择结束时间
	const cancelEndTime = () => {
		showEndTime.value = false;
	}

	// 打开结束时间
	const selectEndTime = () => {
		showEndTime.value = true;
	}

	// 确认选择结束时间
	const confirmEndTime = () => {
		endTime.value = timeFormat(endTime.value, "yyyymmdd");
		upDownParams.value.end = endTime.value + '0000';

		showEndTime.value = false;

		// 按时间筛选
		getDaiKuanData();

	}

	// 时间选择
	const timeIndex = ref(0);

	// 自定义时间范围
	const isShowRang = ref(false);

	// 选择时间
	const selectTime = (val) => {
		timeIndex.value = val;
		if (val == 0) {
			upDownParams.value.start = getCurrentStartDate;
			upDownParams.value.end = getCurrentEndDate;
			// 筛选时间粒度
			getDaiKuanData(1);
		} else if (val == 1) {
			upDownParams.value.start = getYesterdayStartDate;
			upDownParams.value.end = getYesterdayEndAllDate;
			// 筛选时间粒度
			getDaiKuanData(1);
		} else if (val == 2) {
			upDownParams.value.start = getWeekStartDate;
			upDownParams.value.end = getWeekEndDate;
			// 筛选时间粒度
			getDaiKuanData(1);
		} else if (val == 3) {
			upDownParams.value.start = getMonthStartDate;
			upDownParams.value.end = getMonthEndDate;
			// 筛选时间粒度
			getDaiKuanData(2);
		}
		if (val == 4) {
			isShowRang.value = true;
			upDownParams.value.start = "";
			upDownParams.value.end = "";
		} else {
			isShowRang.value = false;
		}
	}
	let timeClassify = reactive([{
			name: "今天",
			value: 0
		},
		{
			name: "昨天",
			value: 1
		}
		// , {
		// 	name: "本周",
		// 	value: 2
		// }, {
		// 	name: "本月",
		// 	value: 3
		// }, {
		// 	name: "自定义",
		// 	value: 3
		// }
	])


	// 粒度选择
	const liIndex = ref(0);

	// 粒度列表
	let timeMins = reactive([{
			name: "5分钟",
			value: "5min"
		},
		{
			name: "1小时",
			value: "hour"
		}
	])

	// 选择粒度
	const selectLi = (val) => {
		liIndex.value = val;

		upDownParams.value.granularity = timeMins[val].value;
		getDaiKuanData(keLiType.value)
	}

	let imageUrl = ref("");
	let keLiType = ref(1);
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');
		imageUrl.value = globalData.value.imgOssUrl;
		// 页面初始化时间初始化
		upDownParams.value.start = getCurrentStartDate;
		upDownParams.value.end = getCurrentEndDate;

		// 获取宽带信息
		getDaiKuanData(keLiType.value)
	})

	// 带宽数据
	const daiKuanData = ref();

	// 获取带宽数据
	const getDaiKuanData = (type) => {
		let e = {
			url: "/app-api/device/flow/stats",
			data: {
				nodeId: props.nodeId ? props.nodeId : 'antd47b41f009dda857030050853fd1d',
				start: upDownParams.value.start,
				end: upDownParams.value.end,
				granularity: upDownParams.value.granularity
			}
		}
		api.default.get(e).then((res) => {
			if (type == "1") {
				res.data.forEach(ele => {
					ele.up = (ele.up / 100000).toFixed(2);
					ele.down = (ele.down / 100000).toFixed(2);
					ele.time = timeFormat(ele.time, "hh:MM:ss")
				})

			} else {
				res.data.forEach(ele => {
					ele.up = (ele.up / 100000).toFixed(2);
					ele.down = (ele.down / 100000).toFixed(2);
					ele.time = timeFormat(ele.time, "yyyy-mm-dd")
				})
			}
			daiKuanData.value = res.data;
		})
	}
</script>

<style scoped>
	.page {
		padding-top: 40rpx;
	}

	.chooseTime {
		padding: 10rpx 0;
		box-sizing: border-box;
		margin-right: 10rpx;
	}

	.timeItem {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background: #18153E;
		border-radius: 8rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.page /deep/ .u-cell__body {
		color: #fff;
		font-size: 26rpx;
	}

	.page /deep/ .u-collapse-item,
	.page /deep/ .u-cell,
	.page /deep/ .u-cell__body {
		background-color: transparent;
	}

	.page /deep/ .u-line {
		height: 0px !important;
	}

	.page /deep/ .u-collapse-item__content__text {
		padding: 10rpx 30rpx !important;
		box-sizing: border-box;
	}

	.page /deep/ .u-cell__body {
		padding: 14rpx 30rpx !important;
		box-sizing: border-box;
		border-bottom: 2rpx solid #1F1757;
	}

	/* 	.page /deep/ .u-cell__body:not(:last-child) {
		border-bottom: 2rpx solid #1F1757;
	} */

	.shouYiHead {
		height: 60rpx;
		line-height: 60rpx;
		/* background: #1F1757; */
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	}

	.activeTime,
	.activeLi {
		background: #291E6F;
	}

	.defaultTime,
	.defaultLi {
		background: #18153E;
	}

	.page /deep/ .u-picker__view__column__item {
		/* color: #fff; */
	}

	.uni-picker-view-mask {
		/* background-image: none !important; */
	}
</style>